<style lang="less" scoped>
.notice {
  margin: 15px;
  .icon-btn {
    font-size: 20px;
    color: #555555;
  }
  .smallForm {
    width: 250px;
    display: inline-block;
  }
  .smallArr {
    width: 15%;
    display: inline-block;
  }
  .ivu-tabs-bar {
    margin: 0;
  }
}
.width90 {
  width: 95%;
}
.redStar {
  color: red;
  font-size: 22px;
}
</style>


<template>
  <div class="notice">
    <Card :bordered="false">
      <p slot="title"
         class="white">更多功能 > <span class="select-font">公告管理</span>
      </p>
      <div>
        <Button type="primary"
                style="margin-right: 25px"
                @click.native="addNotice">新增公告</Button>
        <Button type="error"
                @click.native="del1"
                style="margin-right: 25px">删除公告</Button>
        <Form :model="formItem"
              class="smallForm">
          <Input v-model="formItem.name"
                 :maxlength="20"
                 style="width:200px;"
                 placeholder="请输入公告标题"></Input>
        </Form>
        <Button type="info"
                style="margin-left:25px"
                @click="getNotice('1')">搜索</Button>
      </div>
    </Card>
    <div class="">
      <Table @on-selection-change="showSelect"
             :data="noticeData"
             :columns="noticeColumns"
             stripe></Table>
      <Page class="pull-right"
            :total="Page.total"
            :current="Page.current"
            :page-size="Page.pageSize"
            size="small"
            show-total
            @on-change="changePage"></Page>
    </div>

    <Modal class="notice-modal"
           title="通告"
           width="600"
           v-model="noticeModal"
           :mask-closable="false">
      <Form :label-width="60"
            :model="noticeItem"
            :rules="rules">
        <Form-item label="作者"
                   prop="author">
          <Input v-model="noticeItem.author"
                 :maxlength="20"></Input>
        </Form-item>
        <Form-item label="标题"
                   prop="title">
          <Input v-model="noticeItem.title"
                 :maxlength="35"></Input>
        </Form-item>
        <Form-item label="正文"
                   prop="text">
          <Input v-model="noticeItem.text"
                 :maxlength="800"
                 type="textarea"></Input>
        </Form-item>
        <Upload multiple
                type="drag"
                :on-success="handleSuccess"
                :format="['pdf','doc','docx','jpg','png','rar','zip','jpeg','txt','xls','xlsx']"
                :on-format-error="handleFormatError"
                :max-size="102400"
                :on-exceeded-size="handleMaxSize"
                :action="daoruUrl">
          <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload"
                  size="52"
                  style="color: #3399ff"></Icon>
            <p>上传附件</p>
          </div>
        </Upload>
        <Table :data="noticeDaoru"
               v-if="noticeDaoru.length > 0"
               :columns="noticeDaoruColumns"
               stripe></Table>
      </Form>
      <div slot="footer">
        <Button type="primary"
                @click="newNotice">保存</Button>
        <Button @click="noticeModal = false">取消</Button>
      </div>
    </Modal>
    <del-modal title="公告"
               :url="urlNoticeDel"
               :delArr="selectData"
               @del="delNotice"
               ref="delModal"></del-modal>
  </div>
</template>

<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import delModal from 'public/delModal';
import { domain } from 'global/setting';
export default {
  components: {
    'del-modal': delModal,
  },
  data() {
    return {
      urlNoticeList: '/sys/pubnotice/list',
      urlNoticeNew: '/sys/pubnotice/new',
      urlNoticeDel: '/sys/pubnotice/del',
      urlNoticeEdit: '',
      noticeData: [],
      rules: {
        author: [{ required: true, message: '作者不能为空', trigger: 'blur' }],
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        text: [{ required: true, message: '正文不能为空', trigger: 'blur' }],
      },
      noticeColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
        },
        {
          title: '标题',
          key: 'title',
        },
        {
          title: '发送人',
          key: 'realname',
        },
        {
          title: '作者',
          key: 'author',
        },
        {
          title: '发送日期',
          key: 'send_date',
        },
        {
          title: '正文',
          key: 'text',
        },
        {
          title: '附件文件数量',
          render: (h, param) => {
            return h('div', {}, param.row.enclosure.length);
          },
        },
      ],
      Page: {
        current: 1,
        pageSize: 13,
        total: 0,
      },
      noticeModal: false,
      daoruUrl: '',
      actionPage: '1',
      noticeItem: {
        author: '',
        title: '',
        text: '',
      },
      dep_name: [],
      selectData: [],
      old_id: '',
      formItem: {
        name: '',
      },
      noticeDaoru: [],
      noticeDaoruColumns: [
        {
          title: '文件名',
          key: 'filename',
        },
        {
          title: '操作',
          render: (h, param) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.delDaoRu(param.row.path, param.index);
                    },
                  },
                },
                '删除'
              ),
            ]);
          },
        },
      ],
    };
  },
  methods: {
    handleMaxSize(file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: `文件太大，不能超过 100M。`,
      });
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: `文件格式不正确，请上传图片或者word文档，Excel文档，pdf文档，压缩文件的其中一种。`,
      });
    },
    addNotice() {
      $('.ivu-upload-list').html('');
      this.noticeModal = true;
      this.noticeItem.title = '';
      this.noticeItem.text = '';
      this.noticeDaoru = [];
      this.noticeItem.author = '';
    },
    handleSuccess(res) {
      this.$Loading.finish();
      this.noticeDaoru.push(res.result);
    },
    changePage(page) {
      this.actionPage = page;
      this.getNotice(page);
    },
    getNotice(page = 1) {
      let params = {
        data: {
          searchValue: {},
          page,
          pageSize: this.Page.pageSize,
        },
        url: this.urlNoticeList,
        token: storage.session.get('token'),
        success: res => {
          this.noticeData = res.data.result.result;
          this.Page.total = res.data.result.totalSize;
        },
      };
      if (this.formItem.name !== '') {
        params.data.searchValue.title = `${this.formItem.name}|#|like`;
      }
      ajaxPost(params);
    },
    newNotice() {
      let enclosure = [];
      this.noticeDaoru.map(item => {
        enclosure.push({ filename: item.filename, path: item.path });
      });
      let params = {
        data: {
          title: this.noticeItem.title,
          text: this.noticeItem.text,
          enclosure,
          author: this.noticeItem.author,
        },
        token: storage.session.get('token'),
        url: this.urlNoticeNew,
        success: res => {
          if (res.data.code == '0000') {
            this.$Message.success({
              content: '发送公告成功',
            });
            this.noticeModal = false;
            this.$Loading.finish();
            this.getNotice(this.actionPage);
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
    del1() {
      if (this.selectData.length > 0) {
        this.$refs.delModal.showModal();
      } else {
        this.$Message.warning('请选择公告');
      }
    },
    delDaoRu(url, index) {
      let params = {
        data: {
          path: url,
        },
        token: storage.session.get('token'),
        url: '/filemanage/del',
        success: res => {
          if (res.data.code == '0000') {
            this.$Message.success({
              content: '删除成功',
            });
            this.noticeDaoru.splice(index, 1);
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
    delNotice(row) {
      this.selectData = [];
      this.getNotice(this.actionPage);
    },
    showSelect(data) {
      this.selectData = data; // 把勾选的数组存起来
    },
  },
  mounted() {
    this.daoruUrl = `${domain}/filemanage/upload?dir=notice&token=${storage.session.get(
      'token'
    )}`;
    this.getNotice();
  },
};
</script>
